import React from "react"
import { Tabs } from "antd"
import avatar from '@/assets/img/avator.webp'
import CenterTab from "./TabComponents/CenterTab"
import FriendTab from "./TabComponents/FriendTab"

function CenterPage({ center }) {

  let { colonText } = center.info.base

  const items = [
    {
      key: '1',
      label: '个人中心',
      children: <CenterTab base={center.centerform.base} />
    },
    {
      key: '2',
      label: '我的好友',
      children: <FriendTab />
    },
    {
      key: '3',
      label: '我的订单',
      children: "我的订单"
    },
    {
      key: '4',
      label: '我的地址',
      children: "我的地址"
    },
    {
      key: '5',
      label: '我的收藏',
      children: "我的收藏"
    },
  ]

  return (
    <div className="commonwrapper">

      {/* 页面标题 */}
      <div className="header">
        <div className="text">个人中心</div>
      </div>

      {/* 个人信息 */}
      <div className="center-info">

        <div className="title">个人信息</div>

        <div className="avatar">
          <img className="img" src={avatar} alt="" />
        </div>

        <div className="name">
          <span className="label">用户名{colonText}</span>
          <span className="text">用户账号1</span>
        </div>

        <div className="money">
          <span className="label">余额{colonText}</span>
          <span className="text">99</span>
        </div>

        <div className="others others_1">
          <span className="label">标签1{colonText}</span>
          <span className="text">其它的内容1</span>
        </div>
        <div className="others others_2">
          <span className="label">标签2{colonText}</span>
          <span className="text">其它的内容2</span>
        </div>
        <div className="others others_3">
          <span className="label">标签3{colonText}</span>
          <span className="text">其它的内容3</span>
        </div>
        <div className="others others_4">
          <span className="label">标签4{colonText}</span>
          <span className="text">其它的内容4</span>
        </div>

      </div>

      {/* tab */}
      <Tabs
        className='centertab'
        destroyInactiveTabPane={true}
        items={items}
      />

    </div>
  )
}

export default React.memo(CenterPage)